<template>
  <div>child子组件</div>
  <div>num: {{ num }}</div>
  <div>str: {{ str }}</div>
  <div>count: {{ count }}</div>
  <input type="text" ref="ipt" />
</template>

<script setup lang="ts">
import { onMounted, inject, ref } from "vue";

// const props = defineProps({
//   num: Number,
//   str: {
//     type: String,
//     required: true,
//   },
// });

// const props = defineProps<{
//   num: number;
//   str?: string;
// }>();

interface PropsType {
  num: number;
  str?: string;
}
const props = defineProps<PropsType>();

// const emit = defineEmits(["abc"]);
const emit = defineEmits<{
  (e: "abc", payload: number, payload2: string): void;
}>();

onMounted(() => {
  emit("abc", 666, "abc");
  console.log(ipt.value);
});

// inject也是使用泛型来约定变量的类型
const count = inject<number>("count");

// 元素的类型HTMLInputElement
const ipt = ref<HTMLInputElement | null>(null);

// const obj = {
//   a: 3,
// };
// ?. 可选链操作符 es11新增
// console.log(obj.b?.c);
// fn2?.();
</script>
